<template>
  <div class="goods-item" @click="itemClick">
    <div class="img-box">
      <img :src="goodsItem.show.img" alt="正在加载..." v-lazy="goodsItem.show.img" @load="imgLoad" />
    </div>
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">￥{{goodsItem.price}}</span>
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    /* 通过事件总线发送事件 */
    imgLoad() {
      this.$bus.$emit("itemImageLoad");
    },
    itemClick() {
      // this.$router.push("/detail/"+this.goodsItem.iid);
      this.$router.push({
        path:'/detail',
        query:{
          iid:this.goodsItem.iid
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.goods-item {
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
  width: 48vw;
  height: auto;
  display: inline-block;
  img {
    width: 100%;
    border-radius: 10px;
  }
}
.goods-info {
  font-size: 12px;
  line-height: 16px;
  // position: absolute;
  bottom: 5px;
  left: 0;
  overflow: hidden;
  text-align: center;
  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }
}

.price {
  color: var(--color-higt-text);
  margin-right: 20px;
  color: var(--color-price);
  font-weight: bold;
}
.collect {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: -15px;
    top: -1px;
    width: 15px;
    height: 15px;
    background: url("~assets/img/common/collect.svg") no-repeat;
    background-size: 100%;
  }
}
</style>